<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>显示样式化的矢量底图</title>
    <style>
        html,body,#viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
    <link rel="stylesheet" href="https://js.arcgis.com/4.17/esri/css/main.css">
    <script src="https://js.arcgis.com/4.17/"></script>
    <script>
        // 构建显示带有自定义样式的矢量底图的应用程序
        // 在地图上放大缩小查看不同比例的样式
        require([
            'esri/Map',
            'esri/views/MapView',
            'esri/Basemap',
            'esri/layers/VectorTileLayer'
        ],function(
            Map,
            MapView,
            Basemap,
            VectorTileLayer
        ){
            // 创建一个新的basemap，将VectorTileLayer作为baseLayer添加到底图
            var basemap = new Basemap({
                baseLayers:[
                    new VectorTileLayer({
                        portalItem:{
                            id:"d2ff12395aeb45998c1b154e25d680e5"  // 森林公园画布
                        }
                    })
                ]
            });

            var map = new Map({
                basemap:basemap
            });

            var view = new MapView({
                container:"viewDiv",
                map:map,
                center: [-100, 40],
                zoom:3
            })
        }) 
    </script>
</head>
<body>
    <div id="viewDiv"></div>
</body>
</html>